<template>
    <div class="listcon" :style="comObj.essentialKey">
      <template v-for="(item, idx) in comObj.childStyle">
        <!--列表文本组件-->
        <VueDragResize
          :key="idx"
          :minw="1"
          :minh="1"
          v-if="item.name == 'listTitle'"
          @click.native.stop="showItemSet('DiyText', idx)"
          :w="item.constyle.width"
          :x="item.constyle.left"
          :y="item.constyle.top"
          :h="item.constyle.height"
          :style="item.style"
        >{{item.data}}</VueDragResize>
        <!--列表按钮组件-->
        <VueDragResize
          :key="idx"
          :minw="1"
          :minh="1"
          @click.native.stop="showItemSet('DiyBtn', idx)"
          @dragstop="updataItem($event, idx, item.name)"
          @resizestop="resizestop($event, idx, item.name)"
          v-if="item.name == 'listBtn'"
          :w="item.constyle.width"
          :x="item.constyle.left"
          :y="item.constyle.top"
          :h="item.constyle.height"
          :style="item.style"
        >{{item.data}}</VueDragResize>
        <!--列表图片组件-->
        <VueDragResize
          :key="idx"
          :minw="1"
          :minh="1"
          v-if="item.name == 'listImg'"
          @click.native.stop="showItemSet('DiyImg', idx)"
          :w="item.constyle.width"
          :x="item.constyle.left"
          :y="item.constyle.top"
          :h="item.constyle.height"
        >
          <img :src="item.data" :style="item.style" alt />
        </VueDragResize>

        <!--列表旧价格组件-->
        <VueDragResize
          :key="idx"
          :minw="1"
          :minh="1"
          v-if="item.name == 'listOldText'"
          @click.native.stop="showItemSet('DiyListPrice', idx)"
          :w="item.constyle.width"
          :x="item.constyle.left"
          :y="item.constyle.top"
          :h="item.constyle.height"
          :style="item.style"
        >{{item.data}}</VueDragResize>
        <!--列表库存组件-->
        <VueDragResize
          :key="idx"
          :minw="1"
          :minh="1"
          @click.native.stop="showItemSet('DiyListInventory', idx)"
          @dragstop="updataItem($event, idx, item.name)"
          @resizestop="resizestop($event, idx, item.name)"
          v-if="item.name == 'listInventory'"
          :w="item.constyle.width"
          :x="item.constyle.left"
          :y="item.constyle.top"
          :h="item.constyle.height"
          :style="item.style"
        >{{item.data}}</VueDragResize>
        <!--列表标签组件-->
        <VueDragResize
          :key="idx"
          :minw="1"
          :minh="1"
          @click.native.stop="showItemSet('DiyListLabel', idx)"
          @dragstop="updataItem($event, idx, item.name)"
          @resizestop="resizestop($event, idx, item.name)"
          v-if="item.name == 'listLabels'"
          :w="item.constyle.width"
          :x="item.constyle.left"
          :y="item.constyle.top"
          :h="item.constyle.height"
          :style="item.style"
        >{{item.data}}</VueDragResize>
        <!--列表时间组件-->
        <VueDragResize
          :key="idx"
          :minw="1"
          :minh="1"
          @click.native.stop="showItemSet('DiyListTime', idx)"
          @dragstop="updataItem($event, idx, item.name)"
          @resizestop="resizestop($event, idx, item.name)"
          v-if="item.name == 'listTime'"
          :w="item.constyle.width"
          :x="item.constyle.left"
          :y="item.constyle.top"
          :h="item.constyle.height"
          :style="item.style"
        >{{item.data}}</VueDragResize>
      </template>
    </div>
</template>
<script>
import VueDragResize from "vue-drag-resize";
import { mapGetters } from "vuex";
import _lodash from "lodash";
// import { Container, Draggable } from "vue-smooth-dnd";
export default {
  props: ["childCon", "comObj", "nowComIdx"],
  components: {
    VueDragResize
    // DiyImg: () => import("../diycomponents/DiyImg")
  },
  computed: {
    ...mapGetters(["listPageStyle"])
  },
  data() {
    return {};
  },
  watch: {
    listPageStyle: {
      handler(oldVal, newVal) {
        // 更新vuex里面的PageJSON
        this.$store.dispatch("apply/PageJSONUpData");
        // 更新父组件中的PageJSON
        this.$emit("updataNowPageJSON");
      },
      deep: true
    }
  },
  mounted() {
    $("#resizable").resizable();
    console.log(this.comObj);
  },
  methods: {
    // 设置当前组件id
    showItemSet(name, idx) {
      // 显示右侧内容
      this.setComData("DiyList", this.nowComIdx + 1);
      // 设置子元素名称及其索引
      this.$store.commit("list/SET_ChildItem", { name, index: idx });
    },
    setComData(name, val) {
      console.log(val);
      this.$emit("setComData", name, val);
    },
    // 设置样式
    updataItem: _lodash.debounce(function(param, idx, name) {
      this.listPageStyle.childStyle[idx].constyle = param;
      // 更新list组件的vuex
      this.$store.commit("list/SET_ListObj", this.listPageStyle);
      // 更新父组件中的PageJSON
      this.$emit("updataNowPageJSON");
      // 更新vuex里面的PageJSON
      this.$store.dispatch("apply/PageJSONUpData");
    }, 600),
    // 子组件缩放结束事件
    resizestop(param, idx, name) {
      this.listPageStyle.childStyle[idx].constyle = param;
    }
  }
};
</script>
<style lang="scss" scoped>
@mixin site($wid, $hig, $top, $left) {
  width: $wid;
  height: $hig;
  position: absolute;
  top: $top;
  left: $left;
}
.listcon {
  width: 100%;
  height: 100%;
  position: relative;
  background: #ffffff;
  .list-img {
    @include site(50px, 50px, 10px, 10px);
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.listborder {
  border: 1px solid #dfdfdf;
}
</style>
